Ⅲ. 알고리즘과 프로그래밍 - 프로그래밍

바이브코딩으로 나만의 앱 만들기 — 우리 학교 급식 월드컵

수업 자료 안내	https://2026-ai.pages.dev/

단원	Ⅲ. 알고리즘과 프로그래밍 - 프로그래밍
주제명	바이브코딩으로 나만의 앱 만들기 — 우리 학교 급식 월드컵
성취기준	[9정03-02] 프로그래밍 언어의 기본 구조와 문법을 이해하고, 프로그램을 작성한다. [9정03-03] 주어진 조건에 맞는 프로그램을 설계·작성하여 문제를 해결한다.
학습목표	• 생성형 AI(Gemini)에게 원하는 기능을 말로 설명하여 앱을 만드는 바이브코딩을 경험할 수 있다. • 내가 원하는 기능을 AI가 이해할 수 있도록 구체적인 프롬프트로 표현할 수 있다. • Google Apps Script로 완성된 앱을 배포하고 링크로 친구들과 공유할 수 있다.
교과 핵심 아이디어	코딩을 처음 배우는 학생도 생성형 AI에게 원하는 것을 정확하게 설명하면 실제로 작동하는 웹 앱을 만들 수 있다. '어떻게 코드를 짜는가'보다 '무엇을 만들고 싶은지 AI에게 어떻게 전달하는가'가 핵심이다.

사용 도구

사용 도구

• AI 도구: Google Gemini (gemini.google.com) — 학교 구글 계정으로 바로 로그인

• 개발/배포 플랫폼: Google Apps Script (script.google.com) — 설치 없이 브라우저에서 실행

• 체험 앱: 부평중 급식 월드컵 (완성본 링크로 먼저 경험 후 수정·배포)

수업 구성

학생들이 배워야 할 핵심내용	수업방법 및 단계	학생활동	평가 내용
• 바이브코딩이란? • 코드를 직접 쓰지 않고 AI와 대화로 앱을 만드는 방식 • 블록코딩 → 바이브코딩으로 확장 • Gemini 프롬프트 작성법 • 역할·조건·예시 포함하기 • 한 번에 하나씩 요청하기 • 오류 메시지 그대로 전달하기 • Google Apps Script 배포	• [도입] 바이브코딩 체험 • 완성된 급식 월드컵 앱 직접 실행 • 블록코딩과의 차이 비교 설명 • [탐색] Gemini로 대화하기 • Gemini에 간단한 앱 요청 시연 • 좋은 프롬프트 vs 나쁜 프롬프트 비교 • [제작] 내 앱 만들기 • [배포] 링크로 공유	• 체험 활동 • 급식 월드컵 앱 직접 플레이 • 바꾸고 싶은 점 메모하기 • 프롬프트 작성 • 나쁜 → 좋은 프롬프트 고치기 • 앱 제작 실습 • Gemini에서 코드 받기 • 발표·공유: 내 앱 한 줄 소개	• AI 활용 태도 • Gemini를 도구로 적극 활용하는가? • 결과를 직접 확인하고 검토하는가? • 프롬프트 작성 능력 • 원하는 기능을 구체적으로 표현했는가? • 문제 해결 과정 • 오류 발생 시 재요청하여 해결하는가? • 링크 배포까지 완료했는가?

수업 과정

1단계 바이브코딩이란? — 블록코딩 다음 단계	지금까지 블록을 끌어다 연결하는 방식으로 프로그램을 만들었다면, 오늘은 AI에게 말로 설명해서 앱을 만드는 '바이브코딩'을 경험한다. 코드를 직접 타이핑하거나 이해하지 않아도 괜찮다. 내가 원하는 것을 Gemini에게 정확하게 전달하는 것이 이 수업의 핵심이다. 완성된 급식 월드컵 앱을 직접 플레이하며 '이런 앱도 AI와 대화만으로 만들 수 있구나'를 먼저 느낀다.

2단계 Gemini에게 말 걸기 — 원하는 것을 정확하게 표현하기	'앱 예쁘게 해줘'처럼 막연하게 말하면 AI도 무엇을 해야 할지 모른다. 좋은 프롬프트의 3가지 요소: ① AI에게 역할 알려주기 ② 원하는 것을 구체적으로 말하기 ③ 한 번에 하나씩 부탁하기 학습지의 나쁜 프롬프트를 좋은 프롬프트로 고쳐보는 활동으로 감을 잡는다.

3단계 내 앱 만들기 — Gemini → Apps Script 흐름	내가 바꾸고 싶은 기능을 하나 정하고 프롬프트를 작성한다. 완성된 프롬프트를 Gemini에 입력하면 코드를 받을 수 있다. 이 코드를 Google Apps Script 편집기에 통째로 붙여넣고 저장 후 실행한다. 화면이 원하는 대로 나오면 성공, 오류가 나면 오류 메시지를 Gemini에 그대로 보내 수정 코드를 다시 받는다.

4단계 배포 — 링크 하나로 세상에 공개하기	앱이 완성되면 Apps Script의 '배포 → 웹 앱으로 배포' 기능으로 누구나 접속 가능한 링크를 만든다. 이 링크를 카카오톡, 구글 클래스룸 등으로 친구들에게 공유하고, 내가 어떤 기능을 넣었는지 한 줄로 소개한다.

AI 윤리

함께 고민하기

AI가 만들어준 앱, 내 작품일까?

Gemini가 코드를 써줬지만, 어떤 기능을 넣을지 기획하고 프롬프트를 쓰고 오류를 고친 건 나였다. 이 앱은 누가 만든 것일까? AI와 나는 어떤 관계일까?

AI 의존이 심해지면?

프롬프트만 잘 쓰면 뭐든 만들 수 있게 되면, 직접 코딩을 배울 필요가 없어질까? 그래도 괜찮을까?

서논술형 평가 문항

서논술형 평가 문항

1. 바이브코딩(Vibe Coding)과 기존 블록코딩의 차이점을 설명하고, 바이브코딩에서 '좋은 프롬프트'가 중요한 이유를 AI의 동작 방식과 연결하여 서술하시오. 또한 본인이 작성한 프롬프트 중 가장 효과적이었던 사례를 들어 좋은 프롬프트의 요소를 구체적으로 설명하시오.

2. Gemini가 생성한 코드를 Google Apps Script에 적용하는 과정에서 오류가 발생했을 때, 이를 해결하기 위해 AI에게 피드백을 전달하는 방법을 구체적으로 서술하시오. 또한 'AI가 만들어준 앱은 누구의 작품인가'라는 질문에 대해 창작과 도구 활용의 관점에서 자신의 견해를 논술하시오.

채점 기준표 (루브릭)

평가 요소	성취수준	평가 기준
바이브코딩 개념 이해 및 프롬프트 작성 능력	상	블록코딩과 바이브코딩의 차이(블록 조합 vs 자연어 지시)를 명확히 구분하고, AI가 맥락과 조건을 기반으로 코드를 생성하므로 구체적인 프롬프트가 필요함을 논리적으로 서술함. 본인 프롬프트 사례에서 상황 제시·구체적 요청·한 번에 하나씩 요청하기 등 핵심 요소를 정확히 설명함.
	중	두 코딩 방식의 차이와 프롬프트 중요성을 언급했으나, AI 동작 방식과의 연결 설명이 부족하거나 본인 사례가 구체적이지 않음.
	하	바이브코딩과 블록코딩의 차이를 설명하지 못하거나, 프롬프트의 중요성을 표면적으로만 언급함.
오류 해결 과정 및 AI 협업의 윤리적 이해	상	오류 메시지를 그대로 AI에게 전달하고 코드와 함께 제시하는 구체적인 피드백 방법을 서술함. 'AI의 작품인가'라는 질문에 대해 기획·프롬프트 작성·오류 수정의 주체가 본인임을 근거로 창작 주체성을 논리적으로 논술함.
	중	오류 해결 방법을 언급했으나 구체적 절차가 부족하거나, AI 작품 여부에 대한 견해가 단순한 찬반 수준에 머무름.
	하	오류 해결 방법을 설명하지 못하거나, AI 협업의 윤리적·창작적 의미에 대한 이해가 없음.

Ⅲ. 알고리즘과 프로그래밍 - 프로그래밍

바이브코딩으로 나만의 앱 만들기 — Gemini 프롬프트 작성 (1차시)

【학습 목표】

1. 완성된 급식 월드컵 앱을 체험하고, 내가 바꾸고 싶은 기능을 구체적으로 메모할 수 있다.

2. 좋은 프롬프트의 핵심 요소를 이해하고, Gemini에 전달할 나만의 프롬프트를 작성할 수 있다.

가. 바이브코딩 vs 블록코딩

블록코딩 (엔트리·스크래치)	바이브코딩 (Gemini + Apps Script)
블록을 마우스로 끌어다 연결	AI에게 말로 설명해서 만들기
정해진 블록 안에서만 가능	내가 원하는 기능은 뭐든 요청 가능
코드가 보이지 않음	코드가 나오지만 외울 필요 없음
주로 간단한 게임·애니메이션	실제 웹 앱, 링크로 배포 가능

나. 급식 월드컵 앱 체험 기록

📱  내가 플레이한 결과 — 우승 급식:

앱을 써보면서 바꾸거나 추가하고 싶은 점 (자유롭게 메모):

다. 좋은 프롬프트 만드는 법

💡  좋은 프롬프트를 만드는 3가지 요소

① 상황 알려주기  →  "이건 구글 앱스크립트로 만든 웹 앱이야"

② 원하는 것 구체적으로  →  "배경색을 하늘색(#E3F2FD)으로 바꿔줘"

③ 한 번에 하나씩  →  배경색 먼저 → 확인 후 → 다음 기능 요청

🔁 오류가 나면  →  오류 메시지를 그대로 복사해서 Gemini에 붙여넣기

나쁜 프롬프트 → 좋은 프롬프트로 고쳐보기

번호	❌ 이렇게 하면 AI가 헷갈려요	✅ 이렇게 바꿔보세요
1	예쁘게 만들어줘	배경색을 흰색에서 연한 하늘색(#E3F2FD)으로 바꿔줘. 구글 앱스크립트 웹 앱이야.
2	오류 고쳐줘	실행하면 이런 오류가 나와: [오류 메시지 붙여넣기]. 어떻게 고치면 돼?
3	다 바꿔줘 (한꺼번에 너무 많이)	우선 제목 글자 크기만 크게(30px) 바꿔줘. 나머지는 이다음에 할게.
4	급식 앱 만들어줘 (처음부터 너무 막연하게)	구글 앱스크립트 웹 앱에서 h1 태그의 글자색을 파란색으로 바꾸는 코드만 알려줘.

✏  직접 고쳐보기

❌  나쁜 프롬프트: "우승하면 뭔가 나오게 해줘"

✅  좋은 프롬프트로 고쳐쓰기:

라. 내가 바꾸고 싶은 기능 — 프롬프트 완성하기

✏  내가 바꾸고 싶은 기능 — 프롬프트 완성하기

내가 바꾸거나 추가하고 싶은 기능:

① 상황 알려주기: "이건 구글 앱스크립트로 만든 웹 앱이야. ________________"

② 원하는 것 구체적으로:

③ 완성된 프롬프트 (①②를 합쳐서 자연스럽게 이어쓰기):

💡 기능 아이디어가 없다면 아래에서 골라보세요!

배경색 바꾸기  |  제목에 학교 이름 넣기  |  우승 메뉴에 🎉 이모지 추가  |  카드 모서리 둥글게  |  버튼 색 바꾸기

Ⅲ. 알고리즘과 프로그래밍 - 프로그래밍

바이브코딩으로 나만의 앱 만들기 — Gemini 코딩 & 배포 (2차시)

【학습 목표】

1. Gemini에서 받은 코드를 Google Apps Script에 붙여넣고 앱을 실행할 수 있다.

2. 오류가 났을 때 오류 메시지를 Gemini에 전달하여 문제를 해결하는 과정을 경험한다.

3. 완성된 앱을 웹 링크로 배포하고 친구들과 공유할 수 있다.

가. Gemini에서 코드 받아 Apps Script에 실행하기

단계	할 일	방법
①	Gemini 열기	gemini.google.com 접속 → 학교 구글 계정 로그인
②	프롬프트 입력	1차시에 작성한 프롬프트 붙여넣기 → 전송
③	코드 복사	Gemini가 준 코드 블록 전체 선택 → 복사 (Ctrl+A → Ctrl+C)
④	Apps Script 열기	script.google.com 접속 → '새 프로젝트' 클릭
⑤	코드 붙여넣기	편집기 안의 기존 내용 모두 지우기 → 붙여넣기 (Ctrl+V)
⑥	저장 후 실행	Ctrl+S 저장 → ▶ 실행 버튼 클릭 → 미리보기 확인

나. 오류가 났을 때 — Gemini에게 이렇게 말해요

이런 상황이라면?	Gemini에게 이렇게 말해요
실행했는데 화면이 아예 안 나와요	"구글 앱스크립트에서 이 코드를 실행했는데 화면이 안 나와. 뭐가 문제야? [코드 전체 붙여넣기]"
오류 메시지가 빨간 글씨로 떴어요	"오류가 났어. 오류 메시지는 이거야: [오류 메시지 그대로 복사해서 붙여넣기]"
실행은 됐는데 색이 내가 원한 게 아니에요	"배경색을 하늘색으로 바꿔달라고 했는데 다른 색이 나왔어. 원하는 색은 #E3F2FD야. 다시 고쳐줘."
추가하고 싶은 기능이 생겼어요	"방금 만든 앱에 기능을 하나 더 추가하고 싶어. [원하는 기능 구체적으로] 어떻게 하면 돼?"

다. 내 앱 배포하기 — 링크 하나로 세상에 공개!

단계	할 일	상세 방법
①	배포 메뉴 열기	Apps Script 상단 메뉴 → '배포' 클릭 → '새 배포' 선택
②	웹 앱 선택	'유형 선택' 버튼 클릭 → '웹 앱' 선택
③	권한 설정	실행 계정: '나(내 계정)' / 액세스 권한: '모든 사용자' 선택
④	배포 완료	'배포' 버튼 클릭 → 권한 요청 창이 뜨면 '액세스 허용' 클릭
⑤	링크 복사	웹 앱 URL 옆 복사 버튼 클릭 → 이 링크가 내 앱 주소!
⑥	공유	링크를 카카오톡·구글 클래스룸·채팅 등으로 친구들에게 전송

🏆  내 앱 완성 기록

내 앱 링크:

내가 추가/변경한 기능:

Gemini에게 총          번 질문했다.   가장 효과적이었던 프롬프트:

오류가 났을 때 어떻게 해결했나요?

라. 스스로 돌아보기

1) 학습 목표 달성도를 스스로 평가해보세요. (해당 칸에 ✓)

자기 평가 항목	잘함	보통	노력
① 바이브코딩이 무엇인지 이해하고, 블록코딩과 어떻게 다른지 설명할 수 있다.	○	○	○
② Gemini에게 상황·조건을 포함한 구체적인 프롬프트를 작성할 수 있다.	○	○	○
③ Gemini에서 받은 코드를 Apps Script에 붙여넣고 실행할 수 있다.	○	○	○
④ 오류가 생겼을 때 포기하지 않고 Gemini에 재요청하여 해결할 수 있다.	○	○	○
⑤ 완성된 앱을 링크로 배포하고 친구에게 기능을 설명할 수 있다.	○	○	○

2) 오늘 수업에서 새롭게 알게 된 점 또는 더 궁금한 점:

예) 프롬프트를 구체적으로 쓸수록 AI가 정확하게 만들어준다는 걸 알았다. 배포해서 링크가 생기는 게 신기했다.

3) 아래 주제를 읽고 자신의 생각을 적어보세요.

【AI가 만들어준 앱, 내 작품일까?】

Gemini가 코드를 써줬지만, 어떤 기능을 넣을지 기획하고 프롬프트를 쓰고 오류를 고친 건 나였다. 이 앱은 누가 만든 것일까? AI와 나는 어떤 관계일까?

예) 기획과 방향을 정한 건 나이므로 나의 작품이라고 생각한다. 그러나 코드를 생성한 AI도...

【AI 의존이 심해지면?】

프롬프트만 잘 쓰면 뭐든 만들 수 있게 되면, 직접 코딩을 배울 필요가 없어질까? 그래도 괜찮을까?

예) 직접 코딩을 몰라도 앱을 만들 수 있다면 편리하겠지만, AI가 틀린 코드를 줬을 때 검토하려면...

【다음에는 어떤 앱을 만들고 싶어?】

오늘 경험을 바탕으로, Gemini와 Apps Script로 만들어보고 싶은 앱이 있다면 어떤 앱인지, 그리고 Gemini에게 어떻게 설명할지 간단히 적어보자.

예) 우리 반 생일을 관리하는 앱을 만들고 싶다. Gemini에게 '이름과 생일을 입력하면 목록으로 보여주는 앱...'이라고 설명하면...